Vue-Cli实用

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 2,026 | 阅读时长 ≈ 8

webpack3配置,从定义环境/生产 变量使用插件,而非mode选项.
也是热更新,但是报错信息会一直累积(开始以为一直在出错,怎么出错这么多),应该可以配置
$TODO: 报错信息清空/不缓存

所以参照webpack,比如路径,模板,输出文件,脚本运行方式(npm run dev/build)等,也可以自己修改/添加(比如less)配置,或者用webpack重新配置

生成文件在dist下,build中build的相关配置,比如webpack的.(creat-react-app 生成的项目在build文件夹下)

基础/配置

1
2
3
// config.devtool('cheap-source-map')

// config.optimization.minimize = false

注入变量

DefinePlugin: https://webpack.docschina.org/plugins/define-plugin/

1
2
3
4
5
6
7
8
9
10
11
12
13
config
  .plugin('define')
  .tap(args => {
      // [ { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"' } } ]
      args[0]['config'] = JSON.stringify({ name: '789' }) 
      return args
  })
config.plugin('define').tap(definitions => {
  Object.assign(definitions[0]['process.env'], {
      name: '"vuejs"',
  });
  return definitions;
});

错误信息

编译时 警告 和 错误信息都输出了，包括 命令行和控制台

lintOnSave

Type: boolean | ‘warning’ | ‘default’ | ‘error’
是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。

设置为 true 或 ‘warning’ 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。

如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: ‘default’。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。
或者，你也可以通过设置让浏览器 overlay 同时显示警告和错误：

transpileDependencies

Type: Array
Default: []

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

webpack

devServer.overlay：出现编译器错误或警告时，在浏览器中显示全屏覆盖。
devServer.clientLogLevel: 默认只展示error信息。不在控制台展示warning

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  // 只想显示编译器错误
  devServer: {
    overlay: true,
    clientLogLevel: "warning", // 浏览器控制台展示的信息。
  },
  // 如果要显示警告和错误：
  devServer: {
    overlay: {
      warnings: false,
      errors: true,
    },
  },
};

结论：
浏览器的控制台和 命令行显示是一样的：如果通过overlay：true 就看不到 warning 信息了。
单独设置warnings： false 没有生效。

chainWebpack 和 configureWebpack

如上图所示，vue-cli 会以 chainWebpack 作为 target，把 configureWebpack 内的配置给 merge 进来。类似于 Object.assign(chainWebpack, configureWebpack)

这样就可以解释了：
使用 chainWebpack 配置 ：会被 vue-cli 直接修改成 eval-cheap-module-source-map，导致 vue.config.js 内的配置没有生效
使用 configureWebpack 配置：chainWebpack 对象内的 devtool 还是被置为默认的 eval-cheap-module-source-map，在后面合并配置的时候，会被 configureWebpack 给覆盖掉，最终生效

sourcemap

验证 devtool 名称时， 我们期望使用某种模式， 注意不要混淆 devtool 字符串的顺序， 模式是： [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map.

cheap-module-eval-source-map
inline-cheap-module-source-map
nosources-source-map

webpack——devtool配置及sourceMap的选择
Webpack的devtool和source maps

webpack为 source map 提供了几个关键字，具体的看下表：

关键字 含义
eval 使用 eval 包裹代码
source-map 生成.map文件
cheap 不包含列信息，也不包括loader的sourcemap
module 包括loader的sourcemap
inline 将.map作为DataURL嵌入，不单独生成.map文件

资源路径/目录

dev.assetsSubDirectory: 提供资源的目录/文件夹
dev.assetsPublicPath: 访问资源的路径,基于webpack server的.所以才有了下面的使用方式
build.assetsSubDirectory: 生成(build)资源存放目录/文件夹(dist/static),不能出现路径,编译会出错
build.assetsPublicPath:访问资源的路径.如果是/表示绝对路径,如果服务器没有提供当前根目录的服务或者根目录没有资源,会加载失败. 网上许多vue项目打开空白就是这个原因:编译生成的js,css等文件在dist目录,而dist目录并没有在根目录(\路径)中,所以没有加载到资源,页面是空白的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
  },
  build: {
    index: path.resolve(__dirname, '../dist/index.html'), // Template for index.html
    assetsRoot: path.resolve(__dirname, '../dist'), // Paths
    assetsSubDirectory:'static',
    // assetsPublicPath: '/', // 原始   
    assetsPublicPath: './', // 推荐  
  }
}

背景图片和img标签引用资源方式
background的使用方式是引用的资源路径,并不是经过编译的模块, 所以上面使用资源路径的访问方式是正确的.下面出错,是因为访问的路径(webpack server提供的服务)下没有资源

img标签使用 相对路径的方式是会编译成模块,路径按当前文件的位置引用.而/static是绝对路径,使用资源路径(webpack server服务提供). dev访问正常, 如果build,网站配置并不会给dist配置/的访问路径,所以绝对路径/static并没有该资源.除非网站配置正确的访问路径,或者自己把资源添加到根目录.
所以推荐使用相对路径.配置build.assetsPublicPath的路径为./,非/,上面也可以使用绝对路径了.不过

1
2
3
4
5
6
7
8
9
10
11
12
13
// ## background:Carousel.vue
<!-- <el-carousel-item :style="{background:'url(/static/images/'+img+(img=='banner3'?'.png':'.webp')+') no-repeat',backgroundSize:'cover'}" :key="index"> -->
<el-carousel-item :style="{background:'url(./static/images/'+img+(img=='banner3'?'.png':'.webp')+') no-repeat',backgroundSize:'cover'}" :key="index">

<!-- blank -->
<!-- <el-carousel-item :style="{background:'url(./images/'+img+(img=='banner3'?'.png':'.webp')+') no-repeat',backgroundSize:'cover'}" :key="index"> -->
<!-- <el-carousel-item :style="{background:'url(../assets/images/'+img+(img=='banner3'?'.png':'.webp')+') no-repeat',backgroundSize:'cover'}" :key="index"> -->
<!-- <el-carousel-item :style="{background:'url(./assets/images/'+img+(img=='banner3'?'.png':'.webp')+') no-repeat',backgroundSize:'cover'}" :key="index"> -->

// ## img:Teachers.vue
<!-- <img src="/static/images/hamburger.png" class="image"> -->
<img src="../assets/images/hamburger.png" class="image">
<!-- <img src="./images/hamburger.png" class="image"> -->

资源

assets和static文件夹的区别

相信有很多人知道vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。
assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在 和 background: url(./logo.png)中，”./logo.png” 是相对的资源路径，将由Webpack解析为模块依赖。

static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。
任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]。

在我们实际的开发中，总的来说：static放不会变动的文件 assets放可能会变动的文件。

因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。

资源路径处理

默认情况下，vue-loader 使用 css-loader 和 Vue 模版编译器自动处理样式和模版文件。在编译过程中，所有的资源路径例如 <img src="...">、background: url(...) 和 @import 会作为模块依赖。

例如，url(./image.png) 会被转换为 require(‘./image.png’)，而

<img src="../image.png">
将会编译为：createElement('img', { attrs: { src: require('../image.png') }})
编译规则:
1) 如果路径是绝对路径，会原样保留。
2) 如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
3) 如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 node 依赖中的资源：
4) (13.7.0+) 如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src。

knowledge is no pay,reward is kindness
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多
0%